<head>
    <title>CodeMirror: Code Folding Demo</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../doc/docs.css">

    <style>
        .some-css {
            color: red;
            line-height: 2;
        }
    </style>

    <link rel="stylesheet" href="test/lib/codemirror.css">
    <link rel="stylesheet" href="test/addon/fold/foldgutter.css">
    <script src="test/lib/codemirror.js"></script>
    <script src="test/addon/fold/foldcode.js"></script>
    <script src="test/addon/fold/foldgutter.js"></script>
    <script src="test/addon/fold/brace-fold.js"></script>
    <script src="test/addon/fold/xml-fold.js"></script>
    <script src="test/addon/fold/indent-fold.js"></script>
    <script src="test/addon/fold/markdown-fold.js"></script>
    <script src="test/addon/fold/comment-fold.js"></script>
    <script src="test/addon/edit/matchbrackets.js"></script>
    <script src="test/mode/javascript/javascript.js"></script>
    <script src="test/mode/sql/sql.js"></script>
    <style>
        .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
    </style>
</head>

<body>
<div id="nav">
    <a href="https://codemirror.net"><h1>CodeMirror</h1><img id="logo" src="../doc/logo.png"></a>

    <ul>
        <li><a href="../index.html">Home</a>
        </li><li><a href="../doc/manual.html">Manual</a>
    </li><li><a href="https://github.com/codemirror/codemirror">Code</a>
    </li></ul>
    <ul>
        <li><a class="active" href="#">Code Folding</a>
        </li></ul>
</div>

<article>
    <h2>Code Folding Demo</h2>
    <form>
        <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
            <textarea id="code" name="code"></textarea></div>
        <div style="max-width: 50em; margin-bottom: 1em">HTML:<br>
            <textarea id="code-html" name="code-html"></textarea></div>
        <div style="max-width: 50em; margin-bottom: 1em">JSON with custom widget:<br>
            <textarea id="code-json" name="code-json">{
  "menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": [
        {"value": "New", "onclick": "CreateNewDoc()"},
        {"value": "Open", "onclick": "OpenDoc()"},
        {"value": "Close", "onclick": "CloseDoc()"}
      ]
    }
  }
}
    </textarea></div>
        <div style="max-width: 50em">Python:<br>
            <textarea id="code-python" name="code">def foo():
  do_some_stuff()
  here
  return None

class Bar:
  __init__(self):
    if True:
      print("True")
    else:
      print("False")

  this_code_makes_no_sense():
    pass

# A comment</textarea></div>
        <div style="max-width: 50em">Sql:<br>
            <textarea id="code-sql" name="code">-- SQL Mode for CodeMirror
SELECT SQL_NO_CACHE DISTINCT
		@var1 AS `val1`, @'val2', @global.'sql_mode',
		1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,
		0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,
		DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,
		'my string', _utf8'your string', N'her string',
        TRUE, FALSE, UNKNOWN
	FROM DUAL
	-- space needed after '--'
	# 1 line comment
	/* multiline
	comment! */
	LIMIT 1 OFFSET 0;</textarea></div>
        <div style="max-width: 50em">Markdown:<br>
            <textarea id="code-markdown" name="code"></textarea></div>
    </form>
    <script id="script" src="js/folding.js"></script>
</article>

</body>